import React from 'react';
import { Modal, Form, Input, message } from 'antd';
import Api from 'Utils/api';
import './index.scss';

const FormItem = Form.Item;
const AddForm = Form.create()(
  (props) => {
    const { form, initialValue, checkPassword, handleConfirmBlur, checkConfirm } = props;
    const { getFieldDecorator } = form;

    return (
      <Form>
        <FormItem
          label="输入原密码:"
        >
          {
            getFieldDecorator('psw', {
              initialValue: initialValue ? initialValue.psw : '',
              rules: [
                { required: true, message: '请输入6-18位的密码', min: 6, max: 18 }
              ]
            })(
              <Input placeholder="请输入" type="password" style={{ width: 350 }} />
            )
          }
        </FormItem>
        <FormItem
          label="输入新密码:"
        >
          {
            getFieldDecorator('newPsw', {
              initialValue: initialValue ? initialValue.newPsw : '',
              rules: [
                { required: true, message: '请输入6-18位的新密码', min: 6, max: 18 },
                { validator: checkConfirm }
              ]
            })(
              <Input placeholder="请输入" type="password" style={{ width: 350 }} />
            )
          }
        </FormItem>
        <FormItem
          label="确认新密码:"
        >
          {
            getFieldDecorator('againPsw', {
              initialValue: initialValue ? initialValue.againPsw : '',
              rules: [
                { required: true, message: '请输入6-18位的新密码', min: 6, max: 18 },
                { validator: checkPassword }
              ]
            })(
              <Input
                placeholder="请输入"
                type="password"
                style={{ width: 350 }}
                onBlur={handleConfirmBlur}
              />
            )
          }
        </FormItem>
      </Form>
    );
  }
);

class ModifyInfoModal extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      loading: false,
      confirmDirty: false
    };
    this.showModal = ::this.showModal;
    this.handleOk = ::this.handleOk;
    this.checkPassword = ::this.checkPassword;
    this.handleConfirmBlur = ::this.handleConfirmBlur;
    this.checkConfirm = ::this.checkConfirm;
  }

  showModal() {
    this.setState({
      visible: true,
    }, () => {
      this.form.resetFields();
    });
  }
  close() {
    this.setState({
      loading: false,
      visible: false,
    });
  }
  handleOk() {
    const { onOk, userId } = this.props;
    this.form.validateFieldsAndScroll((err) => {
      if (!err) {
        const value = this.form.getFieldsValue();
        const api = new Api({
          method: 'PUT',
          path: `/passwd/users/${userId}`,
          data: {
            old_password: value.psw,
            password: value.newPsw
          },
          success: () => {
            onOk();
            this.close();
          },
          error: (msg) => {
            message.error(msg);
          }
        });
        api.run();
      }
    });
  }
  handleConfirmBlur(e) {
    const value = e.target.value;
    this.setState({ confirmDirty: !!value });
  }
  checkPassword(rule, value, callback) {
    if (value && value !== this.form.getFieldValue('newPsw')) {
      callback('两次密码不相同');
    } else {
      callback();
    }
  }
  checkConfirm(rule, value, callback) {
    const form = this.form;
    if (value && this.state.confirmDirty) {
      form.validateFields(['againPsw'], { force: true });
    }
    callback();
  }
  render() {
    return (
      <Modal
        className="modify-info-modal"
        title="修改密码"
        visible={this.state.visible}
        onOk={this.handleOk.bind(this)}
        onCancel={this.close.bind(this)}
        confirmLoading={this.state.loading}
        width={820}
        height={554}
        maskClosable={false}
        zIndex={99999}
      >
        <AddForm
          initialValue={this.state.record ? this.state.record : {}}
          ref={(ref) => { this.form = ref; }}
          checkPassword={this.checkPassword}
          handleConfirmBlur={this.handleConfirmBlur}
          checkConfirm={this.checkConfirm}
        />
        <div className="psw-info">
          提示：密码长度为6~18位
        </div>
      </Modal>
    );
  }
}

export default ModifyInfoModal;
